<template lang="html">
  <el-container class="view-book-list-layout view-container" v-loading="chapterLaoding">
    <el-header class="view-book-list-header view-header">
      <el-row>
        <el-col :span="5">
          <span style="font-size: 22px; font-weight: bold;">书架</span>
        </el-col>
        <el-col :span="19">
          <el-input v-model="searchBookName" placeholder="请输入书名" class="view-book-list-search" clearable />
        </el-col>
      </el-row>
    </el-header>
    <el-main class="view-book-list-main">
      <div class="view-book-list-empty" v-if="showBooks.length == 0">
        <el-empty :description="emptyMsg" />
      </div>
      <el-menu class="view-book-list-menu" :default-active="bookActive" v-else>
        <el-menu-item v-for="bookItem in showBooks" :index="bookItem.bookId" :key="bookItem.bookId"
          @click="choseBook(bookItem)">
          <el-row>
            <el-col :span="5">
              <el-image :src="bookItem.bookPic" class="book-img" :lazy="true" />
            </el-col>
            <el-col :span="19">
              <p class="book-name">{{ bookItem.bookName }}</p>
              <p class="book-desc" :title="bookItem.bookDesc">{{ bookItem.bookDesc }}</p>
            </el-col>
          </el-row>
        </el-menu-item>
      </el-menu>
    </el-main>
  </el-container>
</template>
<script setup>
import { ref, watch } from 'vue';
import { debounce } from 'lodash';
import { onMounted } from 'vue';
import { useBookshelfStore } from '@/stores/bookshelf';

const bookshelfStore = useBookshelfStore();
const emit = defineEmits(['choseBook']) // 父组件的事件

const searchBookName = ref('')
const bookActive = ref('')
const chapterLaoding = ref(false); // 章节加载中
const emptyMsg = ref('暂无书籍'); // 空数据提示

// 书籍搜索
const showBooks = ref([]);
const debouncedSearch = debounce((value) => {
  if (value === '') {
    showBooks.value = books
  } else {
    showBooks.value = books.filter((book) => {
      return book.name.includes(value)
    })
  }
}, 100);

watch(searchBookName, (newValue) => {
  debouncedSearch(newValue);
});

const choseBook = (book) => {
  emit('choseBook', book);
}

function getUserBookshelf() {
  chapterLaoding.value = true;
  return bookshelfStore.getBooks()
    .then((books) => {
      showBooks.value = books;
      choseBook(books[0]); // 默认选择第一本书籍
      bookActive.value = books[0].bookId;
    }).catch((err) => {
      console.error('getUserBookshelf', err);
    }).finally(() => {
      chapterLaoding.value = false;
    });
}

// 挂载
onMounted(() => {
  getUserBookshelf();
});

</script>
<style scoped lang="less">
.view-book-list-layout {
  background-color: #fff;
  border-radius: 10px;

  .view-book-list-header {
    padding: 5px 5px 5px 0px !important;
    height: 60px;

    .el-row {
      height: 50px;
    }
  }

  .view-book-list-main {
    width: 100%;
    padding: 5px !important;

    .view-book-list-empty {
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    .view-book-list-menu {
      background-color: transparent;
      border: none;

      .el-menu-item {
        transition: none !important;
        color: #000;
        margin-bottom: 5px;
        border: 1px solid transparent;
        height: 70px;
        padding: 0px 10px !important;

        .el-row {
          width: 100%;
          align-items: center;
        }

        .book-img {
          width: 40px;
          height: 50px;
          display: flex;
          border-radius: 5px;
        }

        .book-name {
          font-size: 16px;
          font-weight: bold;
          color: #000;
          height: 30px;
          line-height: 30px;
        }

        .book-desc {
          width: 100%;
          font-size: 12px;
          color: #666;
          height: 20px;
          line-height: 20px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }

      .el-menu-item.is-active,
      .el-menu-item:hover {
        border-radius: 10px !important;
        background-color: #f9f9f9;
        border: 1px solid #ccc;
        box-shadow: 4px 4px 4px rgba(204, 204, 204, 0.5);
      }

      .el-menu-item:hover {
        box-shadow: 4px 4px 4px rgba(91, 94, 199, 0.2);
      }
    }
  }
}
</style>
